<template>
  <div class="flex flex-col h-full">
    <vxe-card title="" class="w-full" :border="false">
      <AuForm ref="formRef" :formList="formList" @submit="search" />
    </vxe-card>

    <div class="flex-grow overflow-hidden mt-4">
      <AuTable ref="tableRef" v-bind="gridOption" @actionClick="actionClick" />
    </div>

    <PostModal v-model="showModal" :formData="formData" @submit="search" />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { AuTable } from "@/components/AuTable";
import { AuForm } from "@/components/AuForm";
import {
  ACTION_TYPE,
  ObjectProps,
  PropDefines
} from "@/components/AuTable/type";
import { FormulaListProp } from "@/api/teaInfuser/formula";
import { postGetList, PostProp } from "@/api/teaInfuser/account";
import PostModal from "@/views/teaInfuser/account/roleManage/PostModal.vue";
import AccountModal from "@/views/teaInfuser/account/accountManage/AccountModal.vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

defineOptions({
  name: "MaterialData"
});

// region 声明ref变量集合
const formList = ref([
  {
    type: "input",
    key: "name",
    label: "role_manage.form.post_name",
    placeholder: "role_manage.form.enter_post_name"
  }
]);
const gridOption = reactive<PropDefines>({
  isServerPage: true,
  columns: [
    { field: "name", title: "role_manage.form.post_name", align: "center" },
    { field: "note", title: "table.note", align: "center" },
    {
      field: "create_time",
      title: "role_manage.form.create_time",
      width: 170,
      align: "center"
    }
  ],
  actions: [ACTION_TYPE.TADD, ACTION_TYPE.EDIT],
  operateTools: [],
  dataSource: [],
  fetchConfig: {
    query: {
      service: (params: ObjectProps) => {
        return postGetList(params);
      },
      param: () => formRef.value.getFormData()
    }
  }
});

const showModal = ref(false);
const formData = ref({});

const formRef = ref();
const tableRef = ref();
// endregion

// region 公共方法的集合

// endregion

// region 组件事件的集合
const search = () => {
  tableRef.value.refresh();
};

type ActionType = {
  key: ACTION_TYPE;
  row: PostProp;
};
const actionClick = ({ key, row }: ActionType) => {
  switch (key) {
    case ACTION_TYPE.TADD:
    case ACTION_TYPE.EDIT:
      formData.value = row;
      showModal.value = true;
      break;
    default:
      break;
  }
};
// endregion
</script>
